<template>
  <!-- 用户协议弹窗 -->
  <view class="agreement-popup" v-if="props.isShow">
    <view class="agreement-container">
      <view class="agreement-title">用户协议与隐私政策</view>
      <scroll-view class="agreement-content" scroll-y>
        <text>
          尊敬的用户，欢迎使用我们的小程序！
          请您在使用我们的服务之前，仔细阅读并了解本用户协议和隐私政策的全部内容。本协议描述了您与我们之间关于小程序使用的权利和义务，以及我们如何收集、使用和保护您的个人信息。
          一、用户协议 1. 您在使用本小程序服务时，必须遵守中华人民共和国相关法律法规。 2.
          您需对使用本小程序的账号及密码安全负责。 3.
          您在使用过程中发布的任何内容，不得违反国家法律法规。 二、隐私政策 1.
          我们会收集您的基本信息（如微信昵称、头像）以提供基础服务。 2.
          我们可能会收集您的位置信息，以便提供更精准的服务。 3.
          我们承诺对您的个人信息进行严格保密，不会将您的信息出售或提供给任何第三方。
          如您同意本协议，请点击"同意"按钮继续使用我们的服务。如您不同意本协议，请点击"不同意"按钮，我们将无法为您提供服务。
        </text>
      </scroll-view>
      <view class="agreement-buttons">
        <button class="disagree-btn" @click="disagreeAgreement">不同意</button>
        <button class="agree-btn" @click="agreeAgreement">同意</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps<{
  isShow: boolean
}>()
const emit = defineEmits(['update:isShow'])
// 同意协议
const agreeAgreement = () => {
  // 记录用户已同意协议
  uni.setStorageSync('userAgreedToTerms', 'true')
  emit('update:isShow', false)
}

// 不同意协议
const disagreeAgreement = () => {
  uni.exitMiniProgram()
}
</script>

<style scoped>
.agreement-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.agreement-container {
  width: 80%;
  max-width: 600rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.agreement-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20rpx;
}

.agreement-content {
  height: 600rpx;
  margin-bottom: 30rpx;
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
}

.agreement-buttons {
  display: flex;
  justify-content: space-between;
}

.agree-btn,
.disagree-btn {
  width: 45%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 32rpx;
}

.agree-btn {
  background-color: #07c160;
  color: #fff;
}

.disagree-btn {
  background-color: #f2f2f2;
  color: #333;
}
</style>
